<template>
  <div class="icon-c flex">
    <el-popover
      v-model="visible"
      placement="bottom"
      title="图标"
      width="400"
      trigger="click"
    >
      <div class="icon-content">
        <div class="icon-box flex">
          <div
            v-for="item in icons"
            :key="item.class"
            class="icon-item flex flex-aic flex-jcc"
            @click="checkedIcon(item)"
          >
            <i :class="item.class" />
          </div>
        </div>
      </div>
      <div slot="reference" class="icon-select flex flex-aic flex-jcc">
        <i :class="iconValue" />
        <i v-if="!iconValue" class="el-icon-arrow-down selete" />
      </div>
    </el-popover>
    <el-button
      v-if="!!iconValue"
      class="ml-10"
      size="small"
      type="default"
      @click="deleteIcon"
      >删除</el-button
    >
  </div>
</template>

<script>
import icons from '@/icons/icons'
export default {
  name: 'IconSelect',
  props: {
    value: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      icons,
      visible: false,
      iconValue: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.iconValue = val
        }
      },
      immediate: true
    }
  },
  methods: {
    // 选择icon
    checkedIcon(item) {
      if (!item.class) return
      this.visible = false
      this.iconValue = item.class
      this.$emit('update:value', this.iconValue)
    },
    // 删除icon
    deleteIcon() {
      this.iconValue = ''
      this.$emit('update:value', '')
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-content {
  max-height: 30vh;
  overflow: auto;
  overflow-x: hidden;
}

.icon-box {
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  width: 380px;
  list-style: none;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  padding-right: 10px;
  .icon-item {
    width: 16.6%;
    height: 50px;
    cursor: pointer;
    float: left;
    text-align: center;
    color: #666;
    font-size: 18px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
    :hover {
      color: var(--button-primary-bgColor);
    }
  }
}

.icon-select {
  width: 32px;
  height: 32px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  position: relative;
  cursor: pointer;

  .selete {
    color: #dcdcdc;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    font-size: 12px;
  }
}
</style>
